<template>
  <view class="permission-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="page-title">权限设置管理</view>
      <button @click="showAddRoleDialog" class="add-btn">+ 新增角色</button>
    </view>

    <!-- 主内容区：左侧角色列表 + 右侧权限配置 -->
    <view class="main-container">
      <!-- 左侧角色列表 -->
      <view class="role-list-container">
        <view class="role-list-header">
          <view class="header-title">角色列表</view>
          <view class="header-count">{{ roleList.length }} 个角色</view>
        </view>

        <view class="role-list">
          <view 
            v-for="(role, index) in roleList" 
            :key="role.id"
            class="role-item"
            :class="{ active: selectedRoleId === role.id }"
            @click="selectRole(role.id)"
          >
            <view class="role-name">{{ role.name }}</view>
            <view class="role-desc">{{ role.desc || '无描述' }}</view>
            <view class="role-actions">
              <uni-icons 
                type="edit" 
                size="20" 
                class="edit-icon"
                @click="showEditRoleDialog(role)"
              ></uni-icons>
              <uni-icons 
                type="trash" 
                size="20" 
                class="delete-icon"
                @click="showDeleteRoleDialog(role.id)"
                :disabled="role.isDefault"
              ></uni-icons>
            </view>
          </view>
        </view>

        <view class="role-list-footer" v-if="roleList.length === 0">
          <uni-icons type="info" size="36" color="#ccc"></uni-icons>
          <view class="empty-text">暂无角色数据</view>
          <button @click="showAddRoleDialog" class="empty-add-btn">创建第一个角色</button>
        </view>
      </view>

      <!-- 右侧权限配置 -->
      <view class="permission-config" v-if="selectedRole">
        <view class="role-info-card">
          <view class="card-header">角色基本信息</view>
          <view class="info-row">
            <view class="info-label">角色名称</view>
            <view class="info-value">{{ selectedRole.name }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">角色描述</view>
            <view class="info-value">{{ selectedRole.desc || '无描述' }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">创建时间</view>
            <view class="info-value">{{ formatDate(selectedRole.createTime) }}</view>
          </view>
          <view class="info-row" v-if="selectedRole.updateTime">
            <view class="info-label">最后修改</view>
            <view class="info-value">{{ formatDate(selectedRole.updateTime) }}</view>
          </view>
          <view class="info-row" v-if="selectedRole.isDefault">
            <view class="info-label">特殊标识</view>
            <view class="info-value default-tag">默认角色（不可删除）</view>
          </view>
        </view>

        <!-- 权限配置区域 -->
        <view class="permission-setting">
          <view class="setting-header">
            <view class="setting-title">权限项配置</view>
            <view class="setting-tips">勾选该角色可拥有的权限项</view>
          </view>

          <!-- 权限项分组 -->
          <view class="permission-groups">
            <view 
              v-for="(group, groupIndex) in permissionGroups" 
              :key="group.id"
              class="permission-group"
            >
              <!-- 分组标题（可折叠） -->
              <view class="group-header" @click="toggleGroup(groupIndex)">
                <uni-icons 
                  :type="group.expanded ? 'minus' : 'plus'" 
                  size="20" 
                  class="group-icon"
                ></uni-icons>
                <view class="group-title">{{ group.name }}</view>
                <view class="group-count">
                  {{ getCheckedCount(group) }}/{{ group.permissions.length }}
                </view>
                <uni-icons 
                  type="checkbox" 
                  size="24" 
                  class="group-check"
                  :class="{ checked: isGroupChecked(group) }"
                  @click="toggleGroupCheck(groupIndex)"
                ></uni-icons>
              </view>

              <!-- 权限项列表 -->
              <view class="permission-items" v-if="group.expanded">
                <view 
                  v-for="(permission, permIndex) in group.permissions" 
                  :key="permission.id"
                  class="permission-item"
                >
                  <view class="permission-checkbox">
                    <uni-icons 
                      type="checkbox" 
                      size="24" 
                      :class="{ checked: isPermissionChecked(group.id, permission.id) }"
                      @click="togglePermission(group.id, permission.id)"
                    ></uni-icons>
                  </view>
                  <view class="permission-info">
                    <view class="permission-name">{{ permission.name }}</view>
                    <view class="permission-desc">{{ permission.desc }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="action-btns">
            <button 
              @click="cancelPermissionEdit" 
              class="cancel-btn"
              v-if="isEditing"
            >
              取消
            </button>
            <button 
              @click="startEditPermission" 
              class="edit-btn"
              v-if="!isEditing"
            >
              编辑权限
            </button>
            <button 
              @click="savePermissionSetting" 
              class="save-btn"
              v-if="isEditing"
            >
              保存设置
            </button>
          </view>
        </view>
      </view>

      <!-- 未选择角色时的提示 -->
      <view class="no-selection" v-if="!selectedRole && roleList.length > 0">
        <uni-icons type="arrow-left" size="48" color="#ccc"></uni-icons>
        <view class="no-selection-text">请从左侧选择一个角色进行权限配置</view>
      </view>
    </view>

    <!-- 新增/编辑角色弹窗 -->
    <uni-popup 
	 ref="addPopup"
      v-model="showRoleDialog" 
      mode="center"
      :mask-click="false"
    >
      <view class="role-dialog">
        <view class="dialog-title">{{ isEditRole ? '编辑角色' : '新增角色' }}</view>
        <view class="dialog-form">
          <view class="form-item">
            <view class="form-label required">角色名称</view>
            <input 
              v-model="roleForm.name" 
              placeholder="请输入角色名称" 
              class="form-input"
              maxlength="50"
            ></input>
          </view>
          <view class="form-item">
            <view class="form-label">角色描述</view>
            <textarea 
              v-model="roleForm.desc" 
              placeholder="请输入角色描述（可选）" 
              class="form-textarea"
              maxlength="200"
              rows="3"
            ></textarea>
          </view>
        </view>
        <view class="dialog-btns">
          <button @click="showRoleDialog = false" class="dialog-cancel">取消</button>
          <button 
            @click="confirmRoleForm" 
            class="dialog-confirm"
            :disabled="!roleForm.name.trim()"
          >
            {{ isEditRole ? '更新角色' : '创建角色' }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除角色确认弹窗 -->
    <uni-popup 
	ref="delPopup"
      v-model="showDeleteDialog" 
      mode="center"
      :mask-click="false"
    >
      <view class="confirm-dialog">
        <view class="dialog-title danger">确认删除</view>
        <view class="dialog-content">
          确定要删除该角色吗？删除后该角色关联的所有权限设置将被清除，已分配该角色的用户将失去对应权限。
        </view>
        <view class="dialog-btns">
          <button @click="showDeleteDialog = false" class="dialog-cancel">取消</button>
          <button @click="confirmDeleteRole" class="dialog-confirm danger">确认删除</button>
        </view>
      </view>
    </uni-popup>

    <!-- 操作结果提示 -->
    <uni-toast 
      v-model="showToast" 
      :message="toastMessage" 
      :duration="2000"
    ></uni-toast>
  </view>
</template>

<script>


export default {

  data() {
    return {
      // 角色列表数据
      roleList: [
        {
          id: 'admin',
          name: '超级管理员',
          desc: '拥有系统所有权限',
          createTime: '2023-01-15 09:30:00',
          updateTime: '2023-06-20 14:20:00',
          isDefault: true,
          permissions: ['*'] // 特殊标识：拥有所有权限
        },
        {
          id: 'editor',
          name: '内容编辑',
          desc: '负责内容管理和编辑',
          createTime: '2023-02-20 11:15:00',
          updateTime: '2023-05-10 16:40:00',
          isDefault: false,
          permissions: [
            'content:view', 'content:create', 'content:edit', 
            'category:view', 'category:edit'
          ]
        },
        {
          id: 'viewer',
          name: '只读用户',
          desc: '仅能查看系统内容，无编辑权限',
          createTime: '2023-03-05 10:00:00',
          isDefault: false,
          permissions: [
            'content:view', 'category:view', 'dashboard:view'
          ]
        }
      ],
      
      // 权限项分组（系统所有可分配的权限）
      permissionGroups: [
        {
          id: 'content',
          name: '内容管理',
          expanded: true,
          permissions: [
            { id: 'content:view', name: '查看内容', desc: '允许查看所有内容列表和详情' },
            { id: 'content:create', name: '创建内容', desc: '允许新增内容' },
            { id: 'content:edit', name: '编辑内容', desc: '允许修改已有内容' },
            { id: 'content:delete', name: '删除内容', desc: '允许删除内容' }
          ]
        },
        {
          id: 'category',
          name: '分类管理',
          expanded: true,
          permissions: [
            { id: 'category:view', name: '查看分类', desc: '允许查看分类列表' },
            { id: 'category:create', name: '创建分类', desc: '允许新增分类' },
            { id: 'category:edit', name: '编辑分类', desc: '允许修改分类信息' },
            { id: 'category:delete', name: '删除分类', desc: '允许删除分类' }
          ]
        },
        {
          id: 'user',
          name: '用户管理',
          expanded: false,
          permissions: [
            { id: 'user:view', name: '查看用户', desc: '允许查看用户列表和详情' },
            { id: 'user:create', name: '创建用户', desc: '允许新增用户' },
            { id: 'user:edit', name: '编辑用户', desc: '允许修改用户信息' },
            { id: 'user:delete', name: '删除用户', desc: '允许删除用户' },
            { id: 'user:assign', name: '分配角色', desc: '允许为用户分配角色' }
          ]
        },
        {
          id: 'system',
          name: '系统设置',
          expanded: false,
          permissions: [
            { id: 'system:config', name: '系统配置', desc: '允许修改系统基础配置' },
            { id: 'system:log', name: '查看日志', desc: '允许查看系统操作日志' },
            { id: 'system:backup', name: '数据备份', desc: '允许执行数据备份和恢复' }
          ]
        }
      ],
      
      // 选中的角色ID和详情
      selectedRoleId: '',
      selectedRole: null,
      // 编辑状态下的权限缓存（避免直接修改原数据）
      tempPermissions: [],
      
      // 状态控制
      isEditing: false,
      showRoleDialog: false,
      isEditRole: false,
      roleForm: {
        name: '',
        desc: ''
      },
      showDeleteDialog: false,
      deleteRoleId: '',
      
      // 提示信息
      showToast: false,
      toastMessage: ''
    };
  },
  onLoad() {
    // 初始化：默认选中第一个角色
    if (this.roleList.length > 0) {
      this.selectRole(this.roleList[0].id);
    }
  },
  methods: {
    // 选择角色
    selectRole(roleId) {
      this.selectedRoleId = roleId;
      this.selectedRole = this.roleList.find(role => role.id === roleId) || null;
      // 初始化临时权限缓存
      this.tempPermissions = this.selectedRole ? [...this.selectedRole.permissions] : [];
      this.isEditing = false;
    },
    
    // 切换权限分组展开/折叠
    toggleGroup(groupIndex) {
      this.permissionGroups[groupIndex].expanded = !this.permissionGroups[groupIndex].expanded;
    },
    
    // 检查权限是否已勾选
    isPermissionChecked(groupId, permissionId) {
      // 超级管理员拥有所有权限（特殊处理）
      if (this.selectedRole?.permissions?.includes('*')) {
        return true;
      }
      return this.tempPermissions.includes(`${groupId}:${permissionId.split(':')[1]}`);
    },
    
    // 切换单个权限勾选状态
    togglePermission(groupId, permissionId) {
      if (!this.isEditing) return;
      // 超级管理员权限不可修改
      if (this.selectedRole?.permissions?.includes('*')) {
        this.showToastMessage('超级管理员默认拥有所有权限，不可修改');
        return;
      }
      
      const fullPermissionId = `${groupId}:${permissionId.split(':')[1]}`;
      const index = this.tempPermissions.indexOf(fullPermissionId);
      
      if (index > -1) {
        // 移除权限
        this.tempPermissions.splice(index, 1);
      } else {
        // 添加权限
        this.tempPermissions.push(fullPermissionId);
      }
    },
    
    // 检查分组是否全选
    isGroupChecked(group) {
      if (this.selectedRole?.permissions?.includes('*')) {
        return true;
      }
      // 计算该分组已勾选的权限数
      const groupPermissionIds = group.permissions.map(p => p.id);
      const checkedCount = groupPermissionIds.filter(id => 
        this.tempPermissions.includes(id)
      ).length;
      return checkedCount === groupPermissionIds.length && groupPermissionIds.length > 0;
    },
    
    // 获取分组已勾选的权限数
    getCheckedCount(group) {
      if (this.selectedRole?.permissions?.includes('*')) {
        return group.permissions.length;
      }
      const groupPermissionIds = group.permissions.map(p => p.id);
      return groupPermissionIds.filter(id => 
        this.tempPermissions.includes(id)
      ).length;
    },
    
    // 切换分组全选/取消
    toggleGroupCheck(groupIndex) {
      if (!this.isEditing) return;
      const group = this.permissionGroups[groupIndex];
      // 超级管理员权限不可修改
      if (this.selectedRole?.permissions?.includes('*')) {
        this.showToastMessage('超级管理员默认拥有所有权限，不可修改');
        return;
      }
      
      const groupPermissionIds = group.permissions.map(p => p.id);
      const isAllChecked = this.isGroupChecked(group);
      
      if (isAllChecked) {
        // 取消全选：移除该分组所有权限
        this.tempPermissions = this.tempPermissions.filter(perm => 
          !groupPermissionIds.includes(perm)
        );
      } else {
        // 全选：添加该分组所有权限（去重）
        groupPermissionIds.forEach(id => {
          if (!this.tempPermissions.includes(id)) {
            this.tempPermissions.push(id);
          }
        });
      }
    },
    
    // 开始编辑权限
    startEditPermission() {
      // 超级管理员权限不可修改
      if (this.selectedRole?.permissions?.includes('*')) {
        this.showToastMessage('超级管理员默认拥有所有权限，无需编辑');
        return;
      }
      this.isEditing = true;
    },
    
    // 取消编辑
    cancelPermissionEdit() {
      // 恢复原始权限
      this.tempPermissions = [...this.selectedRole.permissions];
      this.isEditing = false;
    },
    
    // 保存权限设置
    savePermissionSetting() {
      // 找到当前角色并更新权限
      const roleIndex = this.roleList.findIndex(role => role.id === this.selectedRoleId);
      if (roleIndex > -1) {
        this.roleList[roleIndex] = {
          ...this.roleList[roleIndex],
          permissions: [...this.tempPermissions],
          updateTime: this.formatDateTime(new Date())
        };
        // 更新选中的角色信息
        this.selectedRole = { ...this.roleList[roleIndex] };
        this.isEditing = false;
        this.showToastMessage('权限设置保存成功');
      }
    },
    
    // 显示新增角色弹窗
    showAddRoleDialog() {
      this.isEditRole = false;
	  this.$refs.addPopup.open()
      this.roleForm = {
        name: '',
        desc: ''
      };
      this.showRoleDialog = true;
    },
    
    // 显示编辑角色弹窗
    showEditRoleDialog(role) {
      // 超级管理员不可编辑
      if (role.isDefault) {
        this.showToastMessage('超级管理员角色不可编辑');
        return;
      }
      this.isEditRole = true;
      this.roleForm = {
        name: role.name,
        desc: role.desc
      };
      this.showRoleDialog = true;
    },
    
    // 确认角色表单（新增/编辑）
    confirmRoleForm() {
      const roleName = this.roleForm.name.trim();
      if (!roleName) return;
      
      if (this.isEditRole) {
        // 编辑角色
        const roleIndex = this.roleList.findIndex(role => role.id === this.selectedRoleId);
        if (roleIndex > -1) {
          this.roleList[roleIndex] = {
            ...this.roleList[roleIndex],
            name: roleName,
            desc: this.roleForm.desc.trim(),
            updateTime: this.formatDateTime(new Date())
          };
          this.selectedRole = { ...this.roleList[roleIndex] };
          this.showToastMessage('角色信息更新成功');
        }
      } else {
        // 新增角色
        const newRole = {
          id: `role_${Date.now()}`,
          name: roleName,
          desc: this.roleForm.desc.trim(),
          createTime: this.formatDateTime(new Date()),
          updateTime: '',
          isDefault: false,
          permissions: []
        };
        this.roleList.push(newRole);
        // 选中新角色
        this.selectRole(newRole.id);
        this.showToastMessage('新角色创建成功');
      }
      
      this.showRoleDialog = false;
    },
    
    // 显示删除角色确认弹窗
    showDeleteRoleDialog(roleId) {
		this.$refs.delPopup.open()
      this.deleteRoleId = roleId;
      this.showDeleteDialog = true;
    },
    
    // 确认删除角色
    confirmDeleteRole() {
      // 从角色列表中移除
      const roleIndex = this.roleList.findIndex(role => role.id === this.deleteRoleId);
      if (roleIndex > -1) {
        this.roleList.splice(roleIndex, 1);
        // 如果删除的是当前选中的角色，重新选中第一个
        if (this.selectedRoleId === this.deleteRoleId) {
          if (this.roleList.length > 0) {
            this.selectRole(this.roleList[0].id);
          } else {
            this.selectedRoleId = '';
            this.selectedRole = null;
          }
        }
        this.showToastMessage('角色已删除');
      }
      this.$delPopup.close()
    },
    
    // 显示提示信息
    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;
    },
    
    // 日期格式化（年月日）
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },
    
    // 日期时间格式化（年月日 时分秒）
    formatDateTime(date) {
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.permission-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
  width: 100%;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  margin-bottom: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  background-color: #007aff;
  color: #fff;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 主内容区 */
.main-container {
  display: flex;
  gap: 20rpx;
  height: calc(100vh - 140rpx);
}

/* 左侧角色列表 */
.role-list-container {
  width: 320rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

.role-list-header {
  padding: 20rpx 16rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.header-count {
  font-size: 24rpx;
  color: #999;
  background-color: #f5f5f5;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
}

.role-list {
  flex: 1;
  overflow-y: auto;
}

.role-item {
  padding: 16rpx;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.role-item.active {
  background-color: #f0f7ff;
  border-left: 4rpx solid #007aff;
}

.role-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.role-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12rpx;
  opacity: 0;
  transition: opacity 0.2s;
}

.role-item:hover .role-actions {
  opacity: 1;
}

.edit-icon {
  color: #007aff;
}

.delete-icon {
  color: #f56c6c;
}

.delete-icon[disabled] {
  color: #ccc;
  opacity: 0.5;
}

.role-list-footer {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx 20rpx;
  color: #999;
}

.empty-text {
  margin: 20rpx 0;
  font-size: 26rpx;
}

.empty-add-btn {
  background-color: #007aff;
  color: #fff;
  padding: 10rpx 24rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
}

/* 右侧权限配置 */
.permission-config {
  flex: 1;
  background-color: #fff;
  border-radius: 12rpx;
  overflow-y: auto;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}

/* 角色信息卡片 */
.role-info-card {
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  background-color: #f9f9f9;
}

.card-header {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  padding-bottom: 8rpx;
  border-bottom: 1px solid #eee;
}

.info-row {
  display: flex;
  margin-bottom: 12rpx;
}

.info-label {
  width: 160rpx;
  font-size: 26rpx;
  color: #666;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  word-break: break-all;
}

.default-tag {
  color: #007aff;
  background-color: #e8f3ff;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

/* 权限配置区域 */
.permission-setting {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.setting-header {
  margin-bottom: 20rpx;
}

.setting-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.setting-tips {
  font-size: 24rpx;
  color: #999;
}

/* 权限分组 */
.permission-groups {
  border: 1px solid #eee;
  border-radius: 8rpx;
  overflow: hidden;
}

.permission-group {
  border-bottom: 1px solid #eee;
}

.permission-group:last-child {
  border-bottom: none;
}

.group-header {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  background-color: #f9f9f9;
  cursor: pointer;
}

.group-icon {
  color: #666;
  margin-right: 12rpx;
}

.group-title {
  flex: 1;
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
}

.group-count {
  font-size: 22rpx;
  color: #999;
  margin-right: 16rpx;
}

.group-check {
  color: #ccc;
}

.group-check.checked {
  color: #007aff;
}

/* 权限项列表 */
.permission-items {
  padding: 8rpx 20rpx;
  background-color: #fff;
}

.permission-item {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1px dashed #f0f0f0;
}

.permission-item:last-child {
  border-bottom: none;
}

.permission-checkbox {
  margin-right: 16rpx;
}

.permission-info {
  flex: 1;
}

.permission-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 4rpx;
}

.permission-desc {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
}

/* 操作按钮 */
.action-btns {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 24rpx;
  padding-top: 16rpx;
  border-top: 1px solid #eee;
}

.edit-btn {
  background-color: #f0f7ff;
  color: #007aff;
  border: 1px solid #e0efff;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.save-btn {
  background-color: #007aff;
  color: #fff;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
}

/* 未选择角色提示 */
.no-selection {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ccc;
  padding: 40rpx;
}

.no-selection-text {
  margin-top: 24rpx;
  font-size: 28rpx;
  text-align: center;
}

/* 角色弹窗 */
.role-dialog {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.confirm-dialog {
  width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  text-align: center;
}

.dialog-title.danger {
  color: #f56c6c;
}

.dialog-content {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 32rpx;
  line-height: 1.6;
  text-align: center;
}

.dialog-form {
  margin-bottom: 32rpx;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.form-label.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 4rpx;
}

.form-input {
  width: 100%;
  padding: 14rpx 16rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.form-textarea {
  width: 100%;
  padding: 14rpx 16rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 26rpx;
  min-height: 120rpx;
}

.dialog-btns {
  display: flex;
  gap: 20rpx;
}

.dialog-cancel {
  flex: 1;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 16rpx 0;
}

.dialog-confirm {
  flex: 1;
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 16rpx 0;
}

.dialog-confirm.danger {
  background-color: #f56c6c;
}
</style>